<extend name="Layout:layout_form" />
<block name="head_after">
    <style type="text/css">
        .tree .prefix { display:inline-block; border-bottom:dotted 1px #AAA; width:2em; margin-right:3px;}
        .tree ul ul .prefix { width:4em;}
    </style>
</block>
<block name="body_main">
    <form method="post" action="{:U('Role/role_permission_edit_save')}">
        <div style="height: 300px; width:350px; overflow-y: scroll; margin: 3px 0px 10px 0px;">
            <ul class="tree">
                <foreach name="tree" item="vo">
                    <li><input type="checkbox" value="{$vo3.id}" />{$vo.title}
                        <ul>
                            <foreach name="vo['children']" item="vo2">
                                <li><i class="prefix"></i><input type="checkbox" value="{$vo3.id}" />{$vo2.title}
                                    <ul>
                                        <foreach name="vo2['children']" item="vo3">
                                            <li><i class="prefix"></i><input type="checkbox" value="{$vo3.id}" />{$vo3.title}</li>
                                        </foreach>
                                    </ul>
                                </li>
                            </foreach>
                        </ul>
                    </li>
                </foreach>
            </ul>
        </div>
        <input type="hidden" name="id" value="{$id}" />
        <button type="submit" class="xsui-hidden"><i class="fa fa-save"></i>提交</button>
    </form>
</block>
<block name="body_after">
    <script type="text/javascript">
        $(function () {
            $('.tree ul :checkbox').click(function () {
                $(this).parent().find(':checkbox').prop('checked', $(this).prop('checked'));
            });
        });
    </script>
</block>